<template>
  <div class="buy-money-box">
    <!-- 电商数据看板-下单金额分布占比 -->
    <div class="buyMoney" id="buyMoney" ref='buyMoney'></div>
  </div>
</template>

<script>
/**
 *       orderAmount: { // 下单金额分布占比
 *         config: {
 *           color: ['#4168e7', '#14d8cb', '#1ccf79', '#ffd83b', '#f65570', '#9850fc']
 *         },
 *         dataList: [
 *           { value: 422, name: '360元以上' },
 *           { value: 335, name: '315-360元' },
 *           { value: 310, name: '270-315元' },
 *           { value: 265, name: '220-270元' },
 *           { value: 215, name: '180-220元' },
 *           { value: 152, name: '0-180元' }
 *         ]
 *       },
 */
import 'echarts/map/js/china.js'

export default {
  name: 'distribution',
  props: {
    documentId: {
      type: String,
      default: () => ''
    },
    config: {
      type: Object,
      default: () => {}
    },
    dataList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      levelList: null
    }
  },
  watch: {
    $route () {
      // this.testFun()
    },
    dataList(val){
      this.handlerBuyMoney()// 电商数据看板下单金额分布占比开始
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.handlerBuyMoney()// 电商数据看板下单金额分布占比开始
    })
  },
  created () {
  },
  methods: {
    // 电商数据看板下单金额分布占比开始
    handlerBuyMoney () {
      const buyMoney = this.$echarts.init(document.getElementById('buyMoney'))
      const config = this.config
      const dataList = [...this.dataList]
      buyMoney.setOption({
        title: {
          text: '',
          left: 'left',
          top: 20,
          textStyle: { color: '#333333' }
        },
        tooltip: {
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          trigger: 'item',
          textStyle: {
            color: '#333' // 设置文字颜色
          },
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff', // 设置背景颜色
          // formatter: '{b} : {c} ({d}%)'
          formatter: function (params, ticket, callback) {
            // console.log(params)
            // params.forEach((item) => {
            return `<div>
              <span class="fl" style="display:inline-block;margin-top:6px;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${params.color}"></span>
              <span class="fl">${params.name}</span>
              <p style='display: flex;justify-content: space-between;'>
              <span style="padding-left:1px;margin-right: 4px;">占比</span>${params.name} ${params.percent}%</p>
            </div>`
          }
        },
        legend: {
          icon: 'circle', // 按钮设置 circle为圆形
          itemWidth: 10,
          itemHeight: 10,
          width: 280, // 文本宽度
          itemGap: 20,
          bottom: 1,
          left: 'center'
          // data: ['0-180元', '180-220元', '220-270元', '270-315元', '315-360元', '360元以上'],
        },
        color: config.color,
        series: [
          {
            type: 'pie',
            radius: '60%', // 值为数组时为空心
            center: ['50%', '50%'],
            clockwise: false, // 饼图是否顺时针展示
            // roseType: 'radius',
            label: { color: 'rgba(51, 51, 51, 1)' },
            labelLine: {
              // lineStyle: { color: 'rgba(255, 255, 255, 0.3)' },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            data: dataList
          }
        ]
      })
      window.addEventListener('resize', function () {
        buyMoney.resize() // myChart 是实例对象
      })
    }
  }
}
</script>
<style scoped lang="scss">
.buyMoney {
  width: 100%;
  height: 400px;
}
</style>
